<template>
    <div class="firstModule">
        <div class="button">
            <!--      <Button :class="{'activeBtn':!isActive}">{{selectedYear}}</Button>-->
            <!--      <Button @click="clickBtn(2020)" :class="{'activeBtn':!isActive}">2023</Button>-->
        </div>
        <div id="firstModule" style="width: 100%; height: 100%"></div>
    </div>
</template>
<script>
import { getStore, removeStore } from '../../../libs/storage';
import { getDictDataByType } from '@/api';
import { getCountJyhy } from '@/api/chart/chart';

export default {
    data() {
        return {
            chart: '',
            isActive: false,
            selectedYear: getStore('tableName'),
            xData: ['旅游行业', '游戏行业', '电商行业', '金融行业'],
            yData: [334, 390, 330, 220]
        };
    },
    methods: {
        init() {
            this.chart = echarts.init(document.getElementById('firstModule'));

            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.xData,
                        axisLabel: {
                            interval: 1, // 设置横坐标全部显示
                            rotate: -45, // 逆时针旋转45度
                            formatter: function (value) {
                                // 自定义格式化函数，根据需要截取或处理横坐标文字
                                if (value.length > 2) {
                                    return value.substring(0, 2) + '...'; // 只显示前5个字符并添加省略号
                                } else {
                                    return value;
                                }
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        // splitLine:{
                        //   show:false
                        // },
                        name: '人数',
                        axisLabel: {
                            formatter: function (value) {
                                if (Math.floor(value) === value) {
                                    return value; // 如果是整数，则直接返回该值
                                }
                                // 如果是小数，则返回空字符串，即不显示该刻度标签
                                return '';
                            }
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dashed'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '人数',
                        type: 'bar',
                        barWidth: '30%',
                        data: this.yData,
                        itemStyle: {
                            normal: {
                                barBorderRadius: [5, 5, 0, 0],
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    // linear-gradient(to right,rgb(204, 213, 82),rgb(114, 228, 122),rgb(3, 236, 163)) !important;
                                    { offset: 0, color: 'rgb(81, 75, 254)' }, // 渐变起始色
                                    { offset: 0.5, color: 'rgb(152, 148, 254)' }, // 渐变起始色
                                    { offset: 1, color: 'rgba(218, 217, 255)' } // 渐变结束色
                                ])
                            }
                        }
                    }
                ]
            };
            this.chart.setOption(option);
        },
        // 点击改变按钮样式
        clickBtn() {
            this.isActive = !this.isActive;
        },
        async getXData() {
            removeStore('tableName');
            const res = await getCountJyhy();
            if (res.success) {
                this.xData = res.result.map(e => e.xData);
                this.yData = res.result.map(e => e.yData);
            }
        }
    },
    async mounted() {
        await this.getXData();
        this.init();
    }
};
</script>

<style scoped lang="less">
.firstModule {
    width: 100%;
    height: 100%;

    .button {
        position: absolute;
        right: 20px;
        top: 10px;

        .ivu-btn {
            margin-left: 0;
            border: 1px solid rgb(0, 134, 241);
            background: none;
            color: rgb(0, 134, 241);

            &:first-child {
                border-radius: 30px 0 0 30px;
            }

            &:last-child {
                border-radius: 0 30px 30px 0;
            }
        }

        .activeBtn {
            background: rgb(0, 134, 241);
            color: #fff;
        }
    }
}
</style>
